<template>
  <header class="navbar navbar-expand" v-bind:class="{'no-nav': index === -1}">
    <div class="container clearfix" style="position:relative">
      <a class="navbar-brand" href="/">
        <img src="/private/logo-t.png" style="max-height:27px;width:auto;" />
      </a>
      <ul class="navbar-nav navbar-nav-main" v-if="index !== -1">
        <li class="nav-item" v-for="(item, index) in items" :key="'nav_' + index" :class="{active: currentIndex == index}" v-if="!item.admin || item.admin && account.isAdmin">
          <router-link class="nav-link" :to="{name: item.route}" :class="{active: index == index}">{{item.text}}</router-link>
        </li>
      </ul>
      <profile-nav :search="true"></profile-nav>
    </div>
  </header>
</template>

<script>
import ProfileNav from './Profile'
import { mapGetters } from 'vuex'
export default {
  components: {
    ProfileNav
  },
  props: ['index'],
  computed: {
    ...mapGetters({
      account: 'account'
    })
  },
  data() {
    return {
      currentIndex: 1,
      items: [
        {
          route: 'home',
          text: '首页'
        },
        {
          route: 'courses',
          text: '课程'
        },
        {
          route: 'tags',
          text: '知识点'
        },
        {
          route: 'notes',
          text: '淘笔记'
        },
        {
          route: 'questions',
          text: '问答'
        },
        {
          route: 'lives',
          text: '直播'
        },
        {
          route: 'admin',
          text: '后台管理',
          admin: true
        }
      ]
    }
  },
  watch: {
    index(index) {
      this.setIndex(index)
    }
  },
  mounted() {
    this.setIndex(this.index)
  },
  methods: {
    setIndex(index) {
      if (this.currentIndex === index) return
      this.currentIndex = index
    }
  }
}
</script>
